<template>
    <div class="site_list">
        <div class="list_cont">
            <dl v-for="(item, key) in addList" :key="key">
                <dt>
                    <div class="xingming">
                        <h3 class="f30">{{item.userName}}</h3>
                        <h4 class="f24">{{item.userPhone}}</h4>
                    </div>
                    <p class="address f24">
                        地址：{{item.areaName1+item.areaName2+item.areaName3+item.address}}
                    </p>
                </dt>
                <dd>
                    <div class="default">
                        <input type="radio" name="def" :checked="item.isDefault == 1 ? true : false" @change="defaulte(item.addressId)">
                        <span class="f26">设为常用</span>
                    </div>
                    <div class="operate">
                        <span class="f26" @click="redactSite(item.addressId)">编辑</span>
                        <span class="f26" @click="shan(item.addressId, true)">删除</span>
                    </div>
                </dd>
            </dl>
        </div>
        <div class="btn" @click="xinjian()">
            <button class="f30">新建收货地址</button>
        </div>
        <div class="mask" v-if="isShan">
            <div class="querenMask">
                <h3 class="f32">确认删除？</h3>
                <div class="btns">
                    <span @click="shan('', false)">取消</span>
                    <span @click="shanchu(false)">确定</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'siteList',
        components: {
            
        },
        data() {
            return {
                addList: [],
                shanId: '',
                isShan: false,
            }
        },
        methods: {
            xinjian() {
                this.$router.push({
                    path: '/addSite',
                    query: {
                        siteId: ''
                    }
                })
            },
            getAddList() {
                let params = {
                    userId: this.$store.state.userId,
                }
                this.$http.fetchGet('getUserAddressList', params).then(res => {
                    if(res.code == 200) {
                        this.addList = res.data
                    } else {
                        this.$vux.toast.text(res.msg)
                    }
                }, err => {
                    console.log(err)
                })
            },
            redactSite(id) {
                this.$router.push({
                    path: '/addSite',
                    query: {
                        siteId: id
                    }
                })
            },
            defaulte(id){
                let params = {
                    addressId: id,
                    userId: this.$store.state.userId
                }
                this.$http.fetchGet('UpdateisDefault', params).then(res => {
                    if(res.code == 200) {
                        this.$vux.toast.text('设为默认成功')
                    } else {
                        this.$vux.toast.text('设为默认失败')
                    }
                }, err => {
                    console.log(err)
                })
            },
            shan(id, bool) {
                this.shanId = id;
                this.isShan = bool;
            },
            shanchu(bool) {
                let params = {
                    addressId: this.shanId,
                    userId: this.$store.state.userId,
                }
                this.$http.fetchGet('UserDelAddress', params).then(res => {
                    if(res.code == 200) {
                        this.$vux.toast.text(res.msg)
                        this.getAddList()
                        this.isShan = bool
                    } else {
                        this.$vux.toast.text(res.msg)
                    }
                }, err => {
                    console.log(err)
                })
            }
        },
        mounted() {
            this.getAddList()
        }
    }
</script>

<style lang="less" scoped>
    .site_list{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background: #f2f2f2;
        .list_cont{
            width: 100%;
            box-sizing: border-box;
            .pb(198);
            dl{
                background: #fff;
                .p(20);
                .mb(20);
                .pb(0);
                dt{
                    .xingming{
                        display: flex;
                        .lh(60);
                        h3{
                            font-weight: normal;
                            .mr(20);
                        }
                        h4{
                            font-weight: normal;
                        }
                    }
                    .address{
                        .lh(40);
                        .pb(20);
                        .pr(160);
                    }
                }
                dd{
                    display: flex;
                    justify-content: space-between;
                    .h(88);
                    .lh(88);
                    border-top: 1px solid #f2f2f2;
                    .operate{
                        span{
                            .ml(20);
                        }
                    }
                }
            }
        }
        .btn{
            width: 100%;
            .padd(0, 20);
            box-sizing: border-box;
            position: fixed;
            bottom: 0;
            left: 0;
            .pb(90);
            .pt(20);
            background: #fff;
            border-top: 1px solid #f2f2f2;
            button{
                width: 100%;
                .h(88);
                border: none;
                border-radius: 5px;
                color: #fff;
                background: #189BEB;
            }
        }
        .mask{
            background: rgba(0,0,0,.5);
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            .querenMask{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -80%);
                background: #fff;
                border-radius: 5px;
                .w(600);
                height: auto;
                h3{
                    .lh(200);
                    text-align: center;
                    font-weight: normal;
                }
                .btns{
                    width: 100%;
                    display: flex;
                    span{
                        flex: 1;
                        text-align: center;
                        .lh(88);
                        border-top: 1px solid #f2f2f2;
                        &:nth-child(1){
                            border-right: 1px solid #f2f2f2;
                        }
                        &:nth-child(2){
                            color: #189BEB;
                        }
                    }
                }
            }
        }
    }
</style>
